<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <ul class="">
        <li v-for="item in list" class="each">{{ item.text }}</li>
      </ul>
    </div>

    <script>
      // 创建根实例
      new Vue({
        el: "#app",
        mounted: function() {
          this.getData();
        },
        data: {
          list: [
            {
              text: "111"
            },
            {
              text: "3333"
            }
          ]
        },
        methods: {
          getData: function() {
            var res = [
              {
                text: "11111111"
              },
              {
                text: "222222222"
              },
              {
                text: "3333333333"
              },
              {
                text: "444444444"
              }
            ];
            this.list = res;
            //报错  Cannot read property 'style' of undefined
            document.getElementsByTagName("li")[3].style.color = "red";
            // Vue.nextTick(function() {
            //   document.getElementsByTagName("li")[3].style.color = "red";
            // });

            // setTimeout(function() {
            //   document.getElementsByTagName("li")[3].style.color = "red";
            // },0);
          }
        }
      });
    </script>
  </body>
</html>
